import React, { PureComponent as Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Button, Select, Radio } from 'antd';
import {connect} from "react-redux";
const {Option} = Select;

const FormItem = Form.Item;

function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
}

@connect(
  state => {
      return {
          infBaseInfo:state.dubboInterface.infBaseInfo
      };
  }
)

class AddMethodForm extends Component {
    static propTypes = {
        form: PropTypes.object,
        onSubmit: PropTypes.func,
        onCancel: PropTypes.func,
        infBaseInfo: PropTypes.object
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.onSubmit(values, () => {
                    this.props.form.resetFields();
                });

            }
        });
    };

    render() {
        const { getFieldDecorator, getFieldsError } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 }
            }
        };

        return (
          <Form onSubmit={this.handleSubmit}>

            <FormItem
                    {...formItemLayout}
                    label="所属接口："
                >
              {this.props.infBaseInfo.cname}
            </FormItem>

            <FormItem {...formItemLayout} label="方法中文名">
              {getFieldDecorator('cname', {
                      rules: [
                          {
                              required: true,
                              message: '请输入方法中文名!'
                          }
                      ]
                  })(<Input placeholder="方法中文名" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="方法名称">
              {getFieldDecorator('mname', {
                      rules: [
                          {
                              required: true,
                              message: '请输入方法名称!'
                          }
                      ]
                  })(<Input placeholder="方法名称" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="请求类名">
              {getFieldDecorator('inname', {
                      rules: [
                          {
                              required: true,
                              message: '请输入请求类名!'
                          }
                      ]
                  })(<Input placeholder="请求类名" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="应答类名">
              {getFieldDecorator('outname', {
                      rules: [
                          {
                              required: true,
                              message: '请输入应答类名!'
                          }
                      ]
                  })(<Input placeholder="应答类名" />)}
            </FormItem>

            <FormItem {...formItemLayout} label="状态">
              {getFieldDecorator('status', {
                      rules: [
                          {
                              required: true,
                              message: '请选择状态!'
                          }
                      ]

                  })(
                    <Select>
                      <Option value = {0}>设计中</Option>
                      <Option value = {1}>sit测试</Option>
                      <Option value = {2}>uat测试</Option>
                      <Option value = {3}>已上线</Option>
                    </Select>
              )}
            </FormItem>

            <FormItem {...formItemLayout} label="是否渠道交易">
              {getFieldDecorator('ischl',{initialValue: 0})(
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
                )}
            </FormItem>


            <FormItem
                    {...formItemLayout}
                    label="注"
                >
              <span style={{ color: "#929292" }}>详细的方法数据可以在编辑页面中添加</span>
            </FormItem>
            <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }} >
              <Button onClick={this.props.onCancel} style={{ marginRight: "10px" }}  >取消</Button>
              <Button
                        type="primary"
                        htmlType="submit"
                        disabled={hasErrors(getFieldsError())}
                    >
                  提交
              </Button>
            </FormItem>

          </Form>
        );
    }
}

export default Form.create()(AddMethodForm);
